<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-input v-model="listQuery.sysLabel" placeholder="配置名称关键字" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button> -->
      <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-plus" @click="handleCreate">
        新增
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="编号" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="App名称" class-name="status-col" width="200">
        <template slot-scope="{row}">
          {{ row.appName }}
        </template>
      </el-table-column>
      <el-table-column label="标语" width="120" align="center">
        <template slot-scope="{row}">
          <span>{{ row.slogen }}</span>
        </template>
      </el-table-column>
      <el-table-column label="h5地址" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.h5==null?'':row.h5 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请人数" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.applyCount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最小苛贷" width="80" align="center">
        <template slot-scope="{row}">
          <span>{{ row.loanMin }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最大苛贷款" width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.loanMax }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最小期数" width="80" align="center">
        <template slot-scope="{row}">
          <span>{{ row.periodsMin }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最大期数" width="80" align="center">
        <template slot-scope="{row}">
          <span>{{ row.periodsMax }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="loanList"
    />

    <el-dialog :title="textMap[dialogStatus]" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="loan" label-position="left" label-width="90px" style="width: 400px; margin-left:50px;">

        <el-input v-model="loan.id" type="hidden" />

        <el-form-item label="App名称" prop="appName">
          <el-input v-model="loan.appName" />
        </el-form-item>
        <el-form-item label="h5链接" prop="h5">
          <el-input v-model="loan.h5" />
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="loan.icon" />
        </el-form-item>
        <el-form-item label="标语">
          <el-input v-model="loan.slogen" />
        </el-form-item>
        <el-form-item label="申请人数">
          <el-input v-model="loan.applyCount" type="number" />
        </el-form-item>
        <el-form-item label="最小可贷" prop="loanMin">
          <el-input v-model="loan.loanMin" type="number" />
        </el-form-item>
        <el-form-item label="最大可贷" prop="loanMax">
          <el-input v-model="loan.loanMax" type="number" />
        </el-form-item>
        <el-form-item label="最小期数" prop="periodsMin">
          <el-input v-model="loan.periodsMin" type="number" />
        </el-form-item>
        <el-form-item label="最大期数" prop="periodsMax">
          <el-input v-model="loan.periodsMax" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addloan, deleteloan, editloan, loanList } from '@/api/sys'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'Sysloanlist',
  components: { Pagination },
  directives: { waves },
  data() {
    var checkhttp = (rule, value, callback) => {
      var reg = /^http:\/\//
      if (!reg.test(value)) {
        callback(new Error('需要http://开头'))
      } else {
        callback()
      }
    }
    return {
      tableData: [],
      total: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        sysLabel: ''
      },
      loan: {
        id: undefined,
        appName: new Date(),
        h5: '',
        slogen: '',
        applyCount: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '新增'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        appName: [{ required: true, message: '名称必填', trigger: 'blur' }],
        h5: [{ required: true, message: 'h5地址必填', trigger: 'blur' }],
        timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
        icon: [{ required: true, message: '图标必填', trigger: 'blur' },
          { validator: checkhttp, trigger: 'blur' }],
        applyCount: [{ required: true, message: 'h5地址必填', trigger: 'blur' }]
      },
      downloadLoading: false,
      listLoading: false
    }
  },
  created() {
    this.loanList(this.listQuery)
  },
  methods: {
    // 获取列表
    async loanList(listQuery) {
      const res = await loanList(this.listQuery)

      this.tableData = res.data.data.records
      this.total = res.data.data.total
    },
    handleFilter() {
      this.listQuery.current = 1

      this.loanList(this.listQuery)
    },
    cancel() {
      this.dialogFormVisible = false
      this.loanList()
    },
    resetTemp() {
      this.loan = {
        id: undefined,
        username: '',
        gmtDatetime: '',
        state: 0
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      // 刷新表单数据验证提示
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      const that = this
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addloan(this.loan).then((res) => {
            if (res.data.code === 200) {
              that.$notify({
                title: 'Success',
                message: 'Update Successfully',
                type: 'success',
                duration: 2000
              })
              that.loanList(that.listQuery)
            } else {
              this.$notify({
                title: 'fail',
                message: 'Update fail',
                type: 'fail',
                duration: 2000
              })
            }
            this.dialogFormVisible = false
          })
        }
      })
    },
    async handleUpdate(row) {
      this.loan = row
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      const that = this
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          editloan(this.loan).then((res) => {
            //
            if (res.data.code === 200) {
              that.$notify({
                title: 'Success',
                message: 'Update Successfully',
                type: 'success',
                duration: 2000
              })
              that.loanList(that.listQuery)
            } else {
              that.$notify({
                title: 'fail',
                message: 'Update fail',
                type: 'fail',
                duration: 2000
              })
            }
            this.dialogFormVisible = false
          })
        }
      })
    },
    handleDelete(row, index) {
      deleteloan(row.id).then((res) => {
        if (res.data.code === 200) {
          this.loanList()
          this.$notify({
            title: 'Success',
            message: 'Delete Successfully',
            type: 'success',
            duration: 2000
          })
        } else {
          this.$notify({
            title: 'fail',
            message: 'Delete fail',
            type: 'fail',
            duration: 2000
          })
        }
      })
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>

<style scoped>
.pic{
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color:rgb(35, 248, 124)
}
.fail{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name{
  margin-left: 50px;
  margin-top: 10px;
  color:rgb(172, 176, 177);
}
.title{
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box{
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick{
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
